{extend name="public/base" /}
{block name="css"}
<style>
  
  .mx-auto {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  img {
    width: 100%;
  }

  .order-title {
    font-size: 18px;
    color: #ffffff;
    font-weight: bold;
    margin-top: -5px;
    margin-bottom: 0;
  }

  .order-input {
    border: 1px solid #E0D0CF;
    background: transparent;
    width: 100%;
    height: 30px;
    margin-top: 10px;
    padding-left: 10px;
    text-align: center;
    border-radius: 24px;
  }

  .order-submit {
    width: 100%;
    height: 30px;
    background: #DAAA84;
    color: #694428;
    border: none;
    padding: 0 2px;
    margin-top: 10px;
    border-radius: 24px;
  }

  .order-submit:active {
    opacity: .8;
  }

</style>
{/block}
{block name="main"}
<section>
  <img src="https://res.bestyoujia.com/web/ZMYJ/activities/act202112-1/h5/mj_yd_01.jpg" alt="">

  <img class="wow animate__animated animate__fadeInUp" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202112-1/h5/mj_yd_02.jpg" style="width: 100%; margin-top: -10px" alt="">
  <img class="wow animate__animated animate__fadeInUp" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202112-1/h5/mj_yd_03.jpg" style="width: 100%; margin-top: -10px" alt="">
  <img class="wow animate__animated animate__fadeInUp" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202112-1/h5/mj_yd_04.jpg" style="width: 100%; margin-top: -10px" alt="">
  <img class="wow animate__animated animate__fadeInUp" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202112-1/h5/mj_yd_05.jpg" style="width: 100%; margin-top: -10px" alt="">
  <img class="wow animate__animated animate__fadeInUp" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202112-1/h5/mj_yd_06.jpg" style="width: 100%; margin-top: -10px" alt="">
  <img class="wow animate__animated animate__fadeInUp" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202112-1/h5/mj_yd_07.jpg" style="width: 100%; margin-top: -10px" alt="">
</section>
{/block}
{block name="js"}
<script>
  $.toast.prototype.defaults.duration = 1000;
  $('.order-submit').on('click', function () {
    const mobile = $('#act-mobile').val();
    const mobileStatus = validMobile(mobile);
    switch (mobileStatus) {
      case 1:
        $.showLoading("预约中");

        const data = { mobile, customer: $('#act-customer').val(), building: $('#act-building').val() };

        doAppointment(data,
          function(res) {
            $.hideLoading();
            $.toast("预约成功");
            $('#act-customer').val('');
            $('#act-mobile').val('');
            $('#act-building').val('');
            console.log('onAppointmentSuccess', res);
            const { data = '' } = res;
            if(data) {
              buryingPoint('APPOINTMENT', data);
            }
          }, function(err) {
            console.log('onAppointmentError', err);
            $.hideLoading();
            $.toast(err, "text");
          });

        break;
      case 2:
        $.toast("手机号码格式不正确", "forbidden");
        break;
      case 3:
        $.toast("请输入手机号码", "forbidden");
        break;
    }
  });
</script>
{/block}